<template>
  <div class="container">
    <header>每日数据详情</header>
    <div class="table">
      <el-table :data="tableData"
                border
                align="center"
                header-align="center"
                width="100%"
                style="text-align: center;"
                tooltip-effect="dark">
        <el-table-column type="index"
                         width="50">
        </el-table-column>
        <el-table-column prop="day"
                         label="日期">
        </el-table-column>
        <el-table-column prop="pv"
                         label="页面点击次数（pv）">
        </el-table-column>
        <el-table-column prop="uv"
                         label="页面点击次数（uv）">
        </el-table-column>
        <el-table-column prop="totalTimes"
                         label="活动参与次数">
        </el-table-column>
        <el-table-column prop="totalPeople"
                         label="活动参与总人数"
                         width="150">
        </el-table-column>
        <el-table-column prop="consumeScore"
                         label="消耗积分数"
                         width="150">
        </el-table-column>
        <el-table-column prop="countBill"
                         label="奖励积分下发数"
                         width="150">
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination @size-change="handleSizeChange"
                     :page-size="10"
                     @current-change="handleCurrentChange"
                     layout="prev, pager, next, jumper"
                     :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DayData',
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        pageNum: 0,
        pageSize: 10,
        activityId: 0
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.searchForm.activityId = this.$route.query.activityId
      console.log(this.searchForm.activityId + '    --------------')
      this.getDataList()
    })
  },
  methods: {
    getDataList() {
      const _this = this
      _this.axios({
        url: '/activityConsole/data-statists/find-day-data',
        params: _this.searchForm
      }).then(res => {
        console.log(res)
        if (res.data.status == 200) {
          _this.tableData = res.data.data
          _this.total = parseInt(res.data.description)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = parseInt(val) - 1
      this.getDataList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    }
  }
}
</script>
<style scoped>
header {
  margin-bottom: 10px;
}

.footer {
  margin-top: 10px;
  text-align: center;
}
</style>
